<template>
  <div 
    class="leftBottomContainer"
    v-loading="isLoading"
    element-loading-text="正在加载中..."
    element-loading-background="rgba(0, 0, 0, 0.15)"
  >
    <p class="title">Accuracy Compare</p>
    <BasicCharts 
      :option="option"
      :carouselNum="option.xAxis.data.length"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watchEffect, reactive } from "vue";
import { storeToRefs } from "pinia";
// store
import useDataScreen from "@/store/dataScreen";

const dataScreenStore = useDataScreen();
// 解构
const { td3Map: map } = storeToRefs(dataScreenStore);

let option = ref<any>({
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: [],
    textStyle: {
      color: '#fff'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [
    // {
    //   name: 'Search Engine',
    //   type: 'line',
    //   stack: 'Total',
    //   data: [820, 932, 901, 934, 1290, 1330, 1320]
    // }
  ]
});

interface seriesDataItem {
  name: string
  type: string
  data: Array<number>
  smooth: boolean
}

const initData = () => {
    // console.log('map.value', map.value)
    // 修改option：对比Rewards
    const noLstmArr = map.value.get('accuracy40_NoLSTM');
    const lstmArr = map.value.get('accuracy40_LSTM');
    // 数据数组
    const tempSeriesArr = ref<Array<seriesDataItem>>([
      {
        name: 'TD3_NO_LSTM: Accuracy',
        type: 'line',
        data: noLstmArr,
        smooth: false
      },
      {
        name: 'TD3_LSTM: Accuracy',
        type: 'line',
        data: lstmArr,
        smooth: false
      }
    ])
    // x轴坐标
    const xAxisData = ref<Array<string>>([]);
    // 每条折线名称
    const seriesNames = ref<Array<string>>(['TD3_NO_LSTM: Accuracy', 'TD3_LSTM: Accuracy']);
    for(let i = 0; i < noLstmArr.length; i++) {
        xAxisData.value.push(i.toString());
    }
    // 赋值
    option.value.xAxis.data = xAxisData.value;
    option.value.legend.data = seriesNames.value;
    option.value.series = tempSeriesArr.value;
};

let isLoading = ref(true);
onMounted(() => {
  setTimeout(() => {
    initData();
    isLoading.value = false;
  }, 5000);
});
</script>

<style scoped lang="scss">
.leftBottomContainer {
    height: 100%;
    width: 100%;
    background-image: url('@/assets/images/screen/bg_right.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
}
.title {
  color: #fff;
  font-size: 1rem;
  padding-left: 1rem;
  background-image: url('@/assets/images/screen/bt.png');
  background-size: cover;
  position: absolute;
  top: 1rem;
  opacity: 0.65;
  left: 0;
  right: 0;
}
</style>